<template>
	<view class="page">
		<Header :title="'销售'"></Header>
		<view class="main">
			<view class="bgBox">
				<image class="bgPic" src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/438120e63cfea2b20368aa41bbacdb4.png" mode="aspectFill"></image>
				<view class="textBox">
					<view class="textItem" @click="select(1)" :style="cont=='可销售' ? 'color: #ffff31;':''">
					<!-- 	<view class="num">
							1
						</view> -->
						<view>
							可销售
						</view>
					</view>
					<view class="textItem" @click="select(2)" :style="cont=='已销售' ? 'color: #ffff31;':''">
<!-- 						<view class="num">
							10
						</view> -->
						<view>
							已销售
						</view>
					</view>
				</view>
			</view>
			<view class="tabBox">
				<u-tabs class="tabs" lineHeight="6rpx" :list="tabList" @change="changeTabs" :scrollable="false"
					lineColor="#00A0E9" itemStyle="height:88rpx;" :current="current" :activeStyle="{
				    color: '#019FE8'}" :inactiveStyle="{
				    color: '#000000'}"></u-tabs>
			</view>
			<view class="content">
				<swiper class="swiper" :current="current" @change="currentChange" :circular="false" :duration="300">
					<!-- 销售 - 其他 -->
					<swiper-item class="swiperItem" v-for="(item,i) in 2"  >
						<scroll-view scroll-y style="height: 100%;width: 100%;">
							<view class="cardList" v-if="list.length>0">
								<view class="cardItem" v-for="item in list"  @click="toDate(item)" >
									<view >
										<image class="shopPic" :src="item.imgUrl" mode="aspectFill"></image>
										<view class="cardMain">
											<view class="name">
												{{item.name}}{{item.number}}
											</view>
											<view class="price">
											￥{{item.money}}
											</view>
											<view class="mainBottom">
												<view class="userBox" v-if="i==0 & cont=='可销售'">
													<image class="headpic" :src="item.avatar" mode="aspectFill">
													</image>
													<view class="userName">
														{{item.phone}}
													</view>
												</view>
												<view class="publicBtn" @click.stop="gonyou(item,1)"
													v-if="i==1 & cont=='可销售' & item.open==0">
													设为公开
												</view>
												<view class="publicBtn" @click.stop="gonyou(item,0)"
													v-if="i==1 & cont=='可销售' & item.open==1">
													设为私有
												</view>
												<view class="publicBtn" @click.stop="tixian(item)"
													v-if="cont=='已销售' & item.status===null">
													提现
												</view>
												<view class="publicBtn"
													v-if="cont=='已销售' & item.status===0">
													待打款
												</view>
												<view class="publicBtn"
													v-if="cont=='已销售' & item.status===1">
													已打款
												</view>
												<image class="zhuanfaIcon" @click.stop="zhuanfa(item)" v-if="cont=='可销售'"
													src="@/static/index/zhuanfa.png" mode="aspectFill"></image>
											</view>
											<view class="buyOutData" v-if="cont=='已销售'">
												销售日期：{{item.salesTime}}
											</view>
										</view>
									</view>
								</view>
							</view>
							<u-empty v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
							</u-empty>
						</scroll-view>
					</swiper-item>

				</swiper>
			</view>

		</view>

		<u-overlay :show="show" @click="show = false" style="z-index: 99999;">
			<view class="warp">
				<view>
					<image  :src="path" v-if="moodData" mode="widthFix"></image>
					<view class="" style="width: 100%;display: flex;justify-content: center;">
						<view class="rect" @click.stop="clickSaveImg">保存图片</view>
					</view>
				</view>
			</view>
		</u-overlay>

		<l-painter isCanvasToTempFilePath @success="path = $event" hidden @progress='progress'
			css="width: 750rpx; padding-bottom: 40rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%)">
			<l-painter-image :src="moodData.imgUrl"
				css="margin-left: 40rpx; margin-top: 40rpx; width: 84rpx;  height: 84rpx; border-radius: 50%;" />
			<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
				<l-painter-text :text="moodData.name"
					css="display: block; padding-bottom: 10rpx; color: #fff; font-size: 32rpx; fontWeight: bold" />
				<l-painter-text text="为您挑选了一个好物" css="color: rgba(255,255,255,.7); font-size: 24rpx" />
			</l-painter-view>
			<l-painter-view
				css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
				<l-painter-image :src="moodData.imgUrl"
					css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx; border-radius: 12rpx;" />
				<l-painter-view
					css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 35rpx; line-height: 1em;">
					<l-painter-text :text="'￥'+moodData.money" css="vertical-align: bottom" />
				</l-painter-view>
				<l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
					<l-painter-text text="冒丰好蜜" css="margin-left: 16rpx; background: #fff4d9" />
					<l-painter-text text="超高好评" css="margin-left: 16rpx; background: #fff4d9" />
				</l-painter-view>
				<l-painter-view css="margin-top: 30rpx">
					<l-painter-text
						css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx; width: 478rpx; padding-right:32rpx; box-sizing: border-box"
						text="认养一桶蜂,产一桶好蜜,过甜蜜人生"></l-painter-text>
					<l-painter-image :src="qRcode" css=" width: 128rpx; height: 128rpx; " />
				</l-painter-view>
			</l-painter-view>
		</l-painter>
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		components: {
			Header
		},
		data() {
			return {
				cont: '可销售',
				tabList: [{
					name: '公开'
				}, {
					name: '我的'
				}],
				current: 0,
				pageSize: 6,
				pageNum: 1,
				total: 0,
				list: [],
				path: '',
				moodData: null,
				show: false,
				qRcode:''
			}
		},
		onShow() {
			this.cont = '可销售'
			this.current = 0
			this.cread()
		},
		methods: {
		async	tixian(e){
		let res = await this.$api.request('manage/money', 'post',{
			salesRecordId: e.salesRecordId,
		})
		if(res.code==200){
			uni.showToast({
				title:'提现成功',
				icon:'none'
			})
		}
			},
			baocun() {

			},
			clickSaveImg() { //先授权相册
				let that = this
				wx.getSetting({
					success: res => {
						if (!res.authSetting['scope.writePhotosAlbum']) { //未授权的话发起授权
							wx.authorize({
								scope: 'scope.writePhotosAlbum',
								success: () => { //用户允许授权，保存到相册
									that.saveImg();
								},
								fail: () => { //用户拒绝授权，然后就引导授权（这里的话如果用户拒绝，不会立马弹出引导授权界面，坑就是上边所说的官网原因）
									wx.openSetting({
										success: () => {
											wx.authorize({
												scope: 'scope.writePhotosAlbum',
												succes: () => { //授权成功，保存图片
													that.saveImg();

												}
											})
										}
									})
								}
							})
						} else { //已经授权
							this.saveImg();
						}
					}
				})
			},
			toDate(e){
				// uni.navigateTo({
				// 	url:'/pages/sell/sellDate/sellDate?id='+e.fosterId+'&cont='+this.cont
				// })
			},
			saveImg() { //保存到相册
			let  that  = this 
				// 图片是base64
				 let base64=this.path.replace(/^data:image\/\w+;base64,/, "");//去掉data:image/png;base64,
				 let filePath=wx.env.USER_DATA_PATH + '/hym_pay_qrcode.png';
					uni.getFileSystemManager().writeFile({
							filePath:filePath ,  //创建一个临时文件名
							data: base64,
							encoding: 'base64',  //写入当前文件的字符编码
							success: res => {
									uni.saveImageToPhotosAlbum({
											filePath: filePath,
											success: function(res2) {
													uni.showToast({
															title: '保存成功，请从相册选择再分享',
															icon:"none",
															duration:5000
													})
													that.show=false
											},
											fail: function(err) {
													uni.showToast({
														title: '下载失败',
														icon: 'none'
													});
											}
									})
							},
							fail: err => {
									//console.log(err)
									uni.showToast({
										title: '下载失败',
										icon: 'none'
									});
							}
					})
				
			},
			progress(e) {
				if (e != 1) {
					uni.showLoading({
						title: '加载中...',
						mask: true,
					})
				} else {
					uni.hideLoading()
				}
			},
		async	zhuanfa(e) {
			let res = await this.$api.request('farmer/foster/qRCode', 'get',{
				fosterId: e.id,
				shareId: uni.getStorageSync('shareId'),
				page:'pages/home'
			})
				this.moodData = e
				// this.qRcode = res.msg
				this.qRcode = `data:image/jpeg;base64,${res.data}`
				this.show = true
			},
			async gonyou(item, e) {
				let that = this
				let res = await this.$api.request('farmer/foster/update','get',{
					fosterId: item.id,
					open: e
				})
				if (res.code == 200) {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					setTimeout(() => {
						that.cread()
					}, 500)
				}
			},
			async cread() {
				let url
				let res
				if (this.current == 0) {
					 res = await this.$api.request('farmer/foster/myList','get',{open:1})
				} else {
					res = await this.$api.request('farmer/foster/myList','get')
				}
				
				this.list = res.data.list
			},
			async cread1() {
				let url
				if (this.current == 0) {
					res = await this.$api.request('farmer/foster/sale/mylist','get',{open:1})
				} else {
					res = await this.$api.request('farmer/foster/sale/mylist','get',{open:0})
				}
				this.list = res.data.list
			},
			select(e) {
				if (e == 1) {
					this.cread()
					this.cont = '可销售'
				} else {
					this.cread1()
					this.cont = '已销售'
				}
			},
			changeTabs(e) {
				this.current = e.index
			},
			currentChange(e) {
				if (this.cont == '可销售') {
					this.cread()
				} else {
					this.cread1()
				}
				this.current = e.detail.current
				this.list = []
			},

		}
	}
</script>

<style lang="scss" scoped>
	.rect {
		width: 285rpx;
		height: 90rpx;
		background-color: #E8220F;
		color: #fff;
		border-radius: 40rpx;
		text-align: center;
		line-height: 90rpx;
		margin-top: 20rpx;
	}

	.warp {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.page {
		height: 100vh;
		width: 100vw;
		background-color: #FFFFFF;
	}

	.loadmoreBox {
		margin: 0 auto;
	}

	.main {

		.submitBtnBox {
			box-sizing: border-box;
			width: 100%;
			padding: 20rpx 43rpx;
			position: fixed;
			bottom: 3%;

			.submitBtn {
				width: 664rpx;
				height: 80rpx;
				background: #E8220F;
				border-radius: 40rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
			}
		}

		.tabBox {
			width: 100%;

			padding: 0 175rpx;
			box-sizing: border-box;

		}

		.content {
			width: 100%;
			padding: 20rpx 40rpx 0;
			box-sizing: border-box;

			.swiper {
				width: 100%;
				flex: 1;
				box-sizing: border-box;
				height: calc(100vh - 534rpx);

				.swiperItem {
					flex: 1;
					box-sizing: border-box;

					.cardList {
						width: 100%;
						display: flex;
						flex-wrap: wrap;

						.cardItem {
							width: calc(100%/2 - 15rpx);
							background: #FFFFFF;
							box-shadow: 0rpx 7rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);
							border-radius: 20rpx;
							padding: 22rpx 13rpx 17rpx;
							margin-bottom: 20rpx;
							margin-right: 19rpx;
							box-sizing: border-box;

							&:nth-child(2n) {
								margin-right: 0rpx;
							}

							.shopPic {
								width: 100%;
								height: 294rpx;
							}

							.cardMain {
								display: flex;
								flex-direction: column;

								.name {
									font-size: 30rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #333333;
									margin-top: 15rpx;
								}

								.price {
									font-size: 30rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #DC1010;
									margin-top: 15rpx;
								}

								.buyOutData {
									margin-top: 15rpx;
									font-size: 26rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #666666;
								}

								.mainBottom {
									display: flex;
									justify-content: space-between;
									align-items: center;
									margin-top: 15rpx;

									.publicBtn {
										width: 180rpx;
										height: 55rpx;
										background: #CD3222;
										border-radius: 28rpx;
										font-size: 30rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: #FFFFFF;
										line-height: 55rpx;
										text-align: center;
									}

									.userBox {
										display: flex;
										align-items: center;

										.headpic {
											width: 46rpx;
											height: 46rpx;
											margin-right: 12rpx;
											border-radius: 50%;
										}

										.userName {
											font-size: 26rpx;
											font-family: PingFang SC;
											font-weight: 400;
											color: #666666;
										}

									}

									.zhuanfaIcon {
										width: 40rpx;
										height: 40rpx;
										margin-left: 10rpx;
									}
								}

							}


						}
					}
				}
			}
		}

		.bgBox {
			height: 205.9rpx;
			width: 750rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 10rpx;
			z-index: 0;

			.bgPic {
				position: absolute;
				z-index: 100;
				height: 205.9rpx;
				width: 750rpx;
			}

			.textBox {
				position: relative;
				z-index: 200;
				display: flex;
				justify-content: space-between;
				width: 100%;
				padding-left: 179rpx;
				padding-right: 211rpx;
				box-sizing: border-box;

				.textItem {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.num {
						margin-bottom: 12rpx;
					}

				}
			}

		}

	}
</style>